<template>
	<el-dialog width="500px" :show-close="false" v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
		<div class="cc-flex flex-h-center">
			<div style="width: 500px">
				<el-form label-position="top" ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="80px" @keyup.enter="submitHandle()">
					<el-form-item prop="name" label="姓名">
						<el-input clearable v-model="dataForm.name"></el-input>
					</el-form-item>
					<el-form-item prop="mobile" label="手机号">
						<el-input clearable v-model="dataForm.mobile"></el-input>
					</el-form-item>
					<el-form-item prop="roleIds" label="角色">
						<el-select multiple style="width: 100%" v-model="dataForm.roleIds">
							<el-option v-for="(role, index) in roleList" :key="index" :label="role.name" :value="role.id" />
						</el-select>
					</el-form-item>
					<!-- <el-form-item prop="orgId" label="部门">
						<orgSelectInputVue v-model="dataForm.orgId"></orgSelectInputVue>
					</el-form-item> -->
					<el-form-item prop="status" label="状态">
						<el-select style="width: 100%" v-model="dataForm.status">
							<el-option v-for="item in EUserStatusList.filter(f => f.value != null)" :key="item.value" :label="item.name" :value="item.value" />
						</el-select>
					</el-form-item>

					<el-form-item prop="remark" label="备注">
						<el-input clearable v-model="dataForm.remark"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus/es'
import { Muser, EUserStatus, EUserStatusList, AccountService } from '@/modules/account'
import { MRole, PermissionService } from '@/modules/permission'

const emit = defineEmits<{
	(e: 'refreshDataList', value?: string | undefined): void
}>()

const roleList = ref<MRole[]>([])

// const orgTreeSelect = ref<MOrg[]>([])
// const treeProps = {
// 	label: 'name'
// }
const visible = ref(false)
const dataFormRef = ref()
const dataForm: Muser = reactive({
	id: undefined,
	name: '',
	status: EUserStatus.disabled,
	password: '',
	mobile: '',
	orgId: undefined,
	roles: undefined,
	roleIds: [],
	token: '',
	tokenName: ''
})

const dataRules = ref({
	name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
	orgId: [{ required: true, message: '请选择部门', trigger: ['blur', 'change'] }],
	mobile: [{ required: true, message: '手机号不能为空', trigger: ['blur', 'change'] }],
	password: [{ required: true, message: '密码不能为空', trigger: ['blur', 'change'] }],
	roleIds: [{ required: true, message: '请至少选择一个角色', trigger: ['blur', 'change'] }],
	status: [{ required: true, message: '状态不能为空', trigger: ['blur', 'change'] }]
})

onMounted(() => {
	PermissionService.getRoleList({ current: 1, size: 100 }).then(list => {
		roleList.value = list.dataList as MRole[]
	})
	// OrgService.getOrgTree().then((tree: any) => {
	// 	orgTreeSelect.value = tree as MOrg[]
	// })
})

// function filterNodeMethod(value: any, data: any) {
// 	if (!value) return true
// 	return data.name.includes(value)
// }

function init(data?: Muser) {
	visible.value = true
	// 重置表单数据
	if (dataFormRef.value) dataFormRef.value.resetFields()
	if (data) {
		Object.assign(dataForm, data)
		if (dataForm.roles) dataForm.roleIds = dataForm?.roles.map(f => f.id) as number[]
	}
}

// 表单提交
function submitHandle() {
	dataFormRef.value.validate((valid: boolean) => {
		console.log('dataForm:', dataForm)
		if (!valid) {
			return false
		}
		AccountService.editUser(dataForm).then(() => {
			visible.value = false
			emit('refreshDataList')
			ElMessage.success({
				message: '操作成功'
			})
		})
	})
}

defineExpose({
	init
})
</script>
<style scope lang="scss">
</style>
